<template>
	<view>
		
		<view>
			<view style="height: 80rpx;"></view>
			<my-input placeholder="旧密码" 
			@input="inputOldPass" :password="true" icon="icon-suo"></my-input>
			<view style="height: 50rpx;"></view>
			<my-input placeholder="新密码" 
			@input="inputNewPass" :password="true" icon="icon-suo"></my-input>
			<view style="height: 50rpx;"></view>
			<my-input placeholder="确认密码" 
			@input="inputAgainPass" :password="true" icon="icon-suo"></my-input>
		</view>
 
		<view @tap="login" class="button">
			<icon style="line-height: 130rpx; font-size: 40rpx; transform: rotate(-45deg); color: #FFFFFF; font-weight: 1000;"
			 class="icon-jiantou iconfont"></icon>
		</view>

		

	</view>
</template>

<script>
	import myInput from "@/components/ui/myInput.vue"
	export default {
		components: {
			myInput,
		},
		data() {
			return {
				oldPass: '',
				password: '',
				newPass:'',
				againPass:'',
			}
		},
		methods: {

			toChangePass(){
				uni.navigateTo({
					url:'.angePass'
				})
			},
			inputOldPass(e){
				this.oldPass = e
			},
			inputNewPass(e) {
				this.newPass = e
			},
			inputAgainPass(e) {
				this.againPass = e
			},
			async login() {
				var token = uni.getStorageSync('nickName')||'';
				var that = this
				if(token == ''){
					uni.showModal({
					    title: '提示',
					    content: '请先登录',
					    success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				}else{
					if(this.againPass == this.newPass){
						var that = this
						var res = await this.$api.changePass({
							oldPwd:that.oldPass,
							newPwd:that.newPass
						})
						if(res.data.code == 200){
							uni.showModal({
								title:'提示',
								content:'旧密码错误',
								success() {
									uni.navigateBack({
										
									})
								}
							})
						}else{
							uni.showModal({
								title:'提示',
								content:'旧密码错误',
								success() {
									
								}
							})
						}
						console.log(res)
					}else{
						uni.showModal({
						    title: '提示',
						    content: '两次输入密码不一致',
						    success: function (res) {
						        if (res.confirm) {
						            console.log('用户点击确定');
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
					}
				}

			},
		}
	}
</script>

<style>
	.button {
		background: linear-gradient(to right, #36A5FF, #02C9FC, #36A5FF);
		transform: rotate(45deg);
		animation: bgcChange 3s;
		animation-iteration-count: infinite;
		text-align: center;
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		margin: 140rpx auto;
	}

	@keyframes bgcChange {
		0% {}

		100% {
			background-position: 130rpx 0;
		}
	}
</style>
